<!-- 车型管理 -->
<template>
  <div class="dashboard-container car-models customer-list-box">
    <el-card class="el-card-top">
      <el-form
        ref="form"
        class="card-form"
        label-position="right"
        label-width="auto"
        :model="Search"
      >
        <el-form-item
          label="车型编号:"
          class="card-item"
          prop="id"
        >
          <el-input
            v-model="Search.id"
            class="input"
            placeholder="请输入车型编号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="应载重量:"
          class="card-item"
          prop="allowableLoad"
        >
          <el-select
            v-model="Search.allowableLoad"
            placeholder="请选择应载重量"
            class="input"
          >
            <el-option
              v-for="item in form.selectWeight"
              :key="item.value"
              :value="item.value"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="应载体积:"
          class="card-item"
          prop="allowableVolume"
        >
          <el-select
            v-model="Search.allowableVolume"
            placeholder="请选择应载体积"
            class="input"
          >
            <el-option
              v-for="item in form.allowableVolume"
              :key="item.value"
              :value="item.value"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="车辆类型:"
          class="card-item"
          prop="name"
        >
          <el-input
            v-model="Search.name"
            class="input"
            placeholder="请输入车辆类型"
          ></el-input>
          <el-button
            type="warning"
            style=" margin-left :30px"
            @click="detail"
          >搜索</el-button>
          <el-button @click="$refs.form.resetFields()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="el-card-body">
      <el-form>
        <el-form-item>
          <el-button
            type="warning"
            @click="add"
          >新增车型</el-button>
        </el-form-item>
        <el-form-item>
          <el-table :data="cartypelist">
            <el-table-column
              label="序号"
              width="60px"
            >
              <template #default="{ $index }">
                {{ sequence($index) }}
              </template>
            </el-table-column>
            <el-table-column
              label="车辆编号"
              prop="id"
              width="200px"
            ></el-table-column>
            <el-table-column
              label="车辆类型"
              prop="name"
              empty-text
            ></el-table-column>
            <el-table-column
              label="车型数量"
              prop="num"
            ></el-table-column>
            <el-table-column
              label="应载重量(吨)"
              prop="allowableLoad"
            ></el-table-column>
            <el-table-column
              label="应载体积(立方米)"
              prop="allowableVolume"
            ></el-table-column>
            <el-table-column
              label="长(米)"
              prop="measureLong"
            ></el-table-column>
            <el-table-column
              label="宽(米)"
              prop="measureWidth"
            ></el-table-column>
            <el-table-column
              label="高(米)"
              prop="measureHigh"
            ></el-table-column>
            <el-table-column
              label="操作"
              align="center"
            >
              <template #default="{ row }">
                <el-button
                  size="nimi"
                  type="text"
                  color="red"
                  @click="edit(row.id)"
                >编辑
                </el-button>
                <span :style="{ color:'#DCDFE6' }">|</span>
                <el-button
                  size="nimi"
                  :style="{ color:'#FF0000'}"
                  type="text"
                  plain
                  @click="del(row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <!-- 分页组件 -->
      <div class="block">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <CarModelsAdd
      ref="dialog"
      :dialog-visible.sync="dialogVisible"
      :type="type"
      @updata="detail"
    ></CarModelsAdd>
  </div>
</template>
<script>
import { list, del } from '@/api/transit'
import CarModelsAdd from './components/car-models-add.vue'
export default {
  components: {
    CarModelsAdd
  },
  data() {
    return {
      cartypelist: [], // 用于保存请求接口后返回的车辆类型信息列表
      total: 0,
      dialogVisible: false, // 控制弹层的显示与隐藏
      type: '', // 区分新增车型还是编辑车型
      rowId: '', // 存放编辑时点击的id
      form: {
        // 应载重量下拉数据
        selectWeight: [
          { value: 'RANGE_LEVEL_1', name: '<1.8(吨)' },
          { value: 'RANGE_LEVEL_2', name: '1.8-6(吨)' },
          { value: 'RANGE_LEVEL_3', name: '6-14(吨)' },
          { value: 'RANGE_LEVEL_4', name: '14-30(吨)' },
          { value: 'RANGE_LEVEL_5', name: '<30-50(吨)' },
          { value: 'RANGE_LEVEL_6', name: '<50-100(吨)' },
          { value: 'RANGE_LEVEL_7', name: '100>(吨)' }
        ],
        // 应载体积下拉数据
        allowableVolume: [
          { value: 'RANGE_LEVEL_1', name: '<3(m³)' },
          { value: 'RANGE_LEVEL_2', name: '3-5(m³)' },
          { value: 'RANGE_LEVEL_3', name: '5-10(m³)' },
          { value: 'RANGE_LEVEL_4', name: '10-15(m³)' },
          { value: 'RANGE_LEVEL_5', name: '15-30(m³)' },
          { value: 'RANGE_LEVEL_6', name: '30-50(m³)' },
          { value: 'RANGE_LEVEL_7', name: '50-80(m³)' },
          { value: 'RANGE_LEVEL_8', name: '80-150(m³)' },
          { value: 'RANGE_LEVEL_9', name: '150>(m³)' }
        ]
      },
      Search: {
        page: 1, // 当前页
        pageSize: 10, // 页面尺寸
        allowableLoad: '',
        allowableVolume: '',
        id: null,
        name: ''
      }
    }
  },
  computed: {
    // 用于实现表格序号连续
    sequence() {
      return (index) => {
        return (this.Search.page - 1) * this.Search.pageSize + index + 1
      }
    }
  },
  async created() {
    // 初始化调用请求分页数据
    await this.currentChange()
  },
  methods: {
    // 当每页条数变化时触发
    handleSizeChange(val) {
      this.Search.pageSize = val
      this.currentChange()
    },
    // 当前页变化的时候触发
    handleCurrentChange(val) {
      this.Search.page = val
      this.currentChange()
    },
    async currentChange() {
      const newlist = await list(this.Search)
      this.cartypelist = newlist.data.items
      this.total = +newlist.data.counts
    },
    // 点击添加车型触发的函数
    add() {
      this.dialogVisible = true
      this.type = '新增车型'
    },
    // 点击编辑车型触发
    edit(id) {
      this.dialogVisible = true
      this.type = '编辑车型'
      this.$refs.dialog.UpData(id)
    },
    async del(id) {
      const res = await del(id)
      if (res.code === 200) this.$message.success(res.msg)
      this.currentChange()
    },
    // 弹层修改后调用事件
    async detail() {
      this.currentChange()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

// 改变el-form-item中lable的样式
::v-deep .card-item .el-form-item__label {
    font-weight: 400;
    color: #20232a;
}
.car-models {
  padding-top: 20px;
  padding-left: 0;

  .el-card-top {
    width: 1458px;
    height: 142px;
    margin: 0 auto;
    margin-bottom: 20px;

    .card-form {
      // padding: 20px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .card-item {
        padding: 0 30px;
      }

      .input {
        padding: 0 15px;
        width: 339px;
        height: 40px;
      }
    }
  }

  .el-card-body {
    width: 1458px;
    margin: 0 auto;

    .block{
      height: 100px;
    }
  }
}
</style>
